// 全局样式
@use '@/styles/reset';

// 引入 nprogress 样式
@use '@/styles/nprogress.css';

/* 全局滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: rgb(255 255 255 / 0.1);
    border-radius: 4px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: rgb(255 255 255 / 0.3);
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
        background-color: rgb(255 255 255 / 0.5);
    }
}

/* 侧边栏专用滚动条 */
.layout_sidder {
    /* 覆盖全局样式 */
    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgb(255 255 255 / 0.2);
    }
}

/* 主内容区域专用滚动条 */
.layout_main {
    /* 覆盖全局样式 */
    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background-color: rgb(0 0 0 / 0.05);
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgb(0 0 0 / 0.2);

        &:hover {
            background-color: rgb(0 0 0 / 0.3);
        }
    }
}

// 定制 nprogress 进度条样式
#nprogress .bar {
    height: 3px;
    background: var(--nprogress-color);
}

#nprogress .peg {
    box-shadow:
        0 0 10px var(--nprogress-color),
        0 0 5px var(--nprogress-color);
}

#nprogress .spinner-icon {
    border-top-color: var(--nprogress-color);
    border-left-color: var(--nprogress-color);
}
